<template>
  <div class="demo-ruleForm">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <div class="input">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="description" class="pres">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <mavon-editor placeholder="建议横向全屏 markdown语法" :toolbars="markdownOption" v-model="ruleForm.content" ref="md" style="z-index:1;" @imgAdd="imgAdd" @imgDel="$imgDel">
            <template v-slot:left-toolbar-after>
              <button
                  type="button"
                  title="文件上传"
                  class="op-icon fa markdown-upload iconfont iconupload"
                  aria-hidden="true"
                  @click="uploadFile"
              >
                <!-- 这里用的是element-ui给出的图标 -->
                <i class="el-icon-upload" />
              </button>
            </template>
          </mavon-editor>
        </el-form-item>
        <!-- 在这里放一个隐藏的input，用来选择文件 -->
        <input ref="uploadInput" style="display: none" type="file" @change="uploadFileChange">
        <el-form-item>
          <el-button class="button" @click="submitForm('ruleForm')">发帖</el-button>
        </el-form-item>

      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "edit",
  data() {
    return {
      //编辑器配置
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        // underline: true, // 下划线
        // strikethrough: true, // 中划线
        // mark: true, // 标记
        // superscript: true, // 上角标
        // subscript: true, // 下角标
        // quote: true, // 引用
        // ol: true, // 有序列表
        // ul: true, // 无序列表
        // link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        // htmlcode: true, // 展示html源码
        // help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        // trash: true, // 清空
        // save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        // navigation: true, // 导航目录
        /* 2.1.8 */
        // alignleft: true, // 左对齐
        // aligncenter: true, // 居中
        // alignright: true, // 右对齐
        /* 2.2.1 */
        // subfield: true, // 单双栏模式
        preview: true, // 预览
      },

      ruleForm: {
        id: '',
        title: '',
        description: '',
        content: '',
      },
      rules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入摘要', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ],
      },

    };
  },
  methods: {

    // 这是我们自定义的按钮触发的方法，这里也可以在自定义其他功能时做一些其他操作。
    uploadFile() {
      // 通过ref找到隐藏的input标签，触发它的点击方法
      this.$refs.uploadInput.click()
    },
    // 监听input获取文件的状态
    uploadFileChange(e) {
      // 获取到input选取的文件
      const file = e.target.files[0]
      // 创建form格式的数据，将文件放入form中，logo是与后台定义的字段
      const formdata = new FormData()
      formdata.append('file', file)

      this.$notify({
        message: this.$createElement('i', {style: 'color: teal'}, '请耐心等待')
      });

      // 发送请求，这里是大家各自的axios请求，方法大家按照各自项目更换就好啦
      this.$axios.post('/videoUpload2',formdata).then(res => {
        // 这里获取到的是mavon编辑器实例，上面挂载着很多方法
        const $vm = this.$refs.md
        // 将文件名与文件路径插入当前光标位置，这是mavon-editor 内置的方法
        $vm.insertText($vm.getTextareaDom(),
            {
              prefix: `[${file.name}]<iframe src=${res.data.data.url} allowfullscreen></iframe>`,
              subfix: '',
              str: ''
            })
      })
    },

    imgAdd(pos, file) {
      var formData = new FormData()
      formData.append('file', file);  //这里的key  file 要和后端贴切
      this.$axios({
        url: '/uploadImg',//输入上传的地址 或者公司的图床地址
        method: 'post',
        data: formData,    //new出来的
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => {
        //这里图片已经上传了 只不过idea不能及时更新
        let url = res.data.data.url; //获取返回的url
        console.log("imgURL "+url);
        this.$refs.md.$imglst2Url([[pos, url]]);  //传入markdown 中 $imglst2Url为固定方法写法
      })
    },

    $imgDel(pos) {
      delete this.img_file[pos];
    },

    submitForm(formName) {
      //validate 前端验证 固定格式
      this.$refs[formName].validate((valid) => {
        if (valid) {

          const _this = this
          //此次操作需要 验证token
          this.$axios.post('/blog/edit', this.ruleForm, {
                headers: {
                  "Authorization": localStorage.getItem("token")
                }
              }
          ).then(res => {
            console.log(res)
            //这段js 是 elementUI格式
            _this.$alert('操作成功', '提示', {
              confirmButtonText: '确定',
              //分类添加 默认
              callback: action => {
                //确定后的操作
                this.$router.push({name: 'mblogdetail', params: {blogId: res.data.data.id}})
              }
            });

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },

  created() {
    //之所以能拿到id  是因为路由请求的中（请求编辑中）包含了id
    const blogId = this.$route.params.blogId
    console.log(blogId)
    const _this = this
    //用于回显 文章内容（编辑模式：能够获取文章id的时候）  拿不到就不回显  又编辑请求来
    if (blogId) {
      this.$axios.get('/blog/' + blogId).then(res => {
        const blog = res.data.data
        _this.ruleForm.id = blog.id
        _this.ruleForm.title = blog.title
        _this.ruleForm.description = blog.description
        _this.ruleForm.content = blog.content
        _this.ruleForm.classification = blog.classification
      })
    }
  }


}

</script>

<style scoped>
.button {
  margin-bottom: 60px;
}

.demo-ruleForm {
  width: 80%;
  text-align: center;
  margin: auto;
}

.pres {
  position: relative;
  bottom: 15px;
}
</style>
